import React, {Component} from 'react';
import Swiper from "swiper";
import {Navigation, Pagination} from "swiper/modules";
import 'swiper/css'
import 'swiper/css/navigation'
import 'swiper/css/pagination'

class KSwiper extends Component {
    componentDidMount() {
        new Swiper('.swiper', {
            modules: [Navigation, Pagination], pagination: {
                el: '.swiper-pagination'
            },
            navigation: {
                nextEl: '.swiper-button-next',
                prevEl: '.swiper-button-prev'
            },
            loop: this.props.loop
        })
    }

    render() {
        return <div className="swiper" style={this.props.style}>
            <div className="swiper-wrapper">
                {this.props.children}
            </div>
            <div className="swiper-pagination"></div>

            <div className="swiper-button-prev"></div>
            <div className="swiper-button-next"></div>
        </div>
    }
}

export default KSwiper;